import { SwipeAction, Toast } from "antd-mobile"
import NavBarAgain from "../components/NavBarAgain"
import NewsItem from '../components/NewsItem'
import './Store.scss'
import { connect } from "react-redux"
import action from '../store/action'
import { useEffect } from "react"
import SkeletonAgain from '../components/SkeletonAgain'
import api from '../api'
function Store(props) {
    let { list: storeList, queryStoreListAsync, removeStoreListById } = props
    useEffect(() => {
        if (!storeList) queryStoreListAsync();
    }, [])
    //移除收藏
    const handleRemove = async (id) => {
        console.log(id);
        try {
            let { code } = await api.storeRemove(id);
            if (+code !== 0) {
                Toast.show({
                    icon: 'fail',
                    content: '删除失败'
                })
                return
            }
            Toast.show({
                icon: 'success',
                content: '删除成功'
            })
            removeStoreListById(id);
        } catch (_) { }

    }
    return <div className="store-box">
        <NavBarAgain title='我的收藏' />
        {storeList ? <div className="box">
            {storeList.map(item => {
                let { id, news } = item
                return <SwipeAction key={id} rightActions={[{
                    key: 'delete',
                    text: '删除',
                    color: 'danger',
                    onClick: handleRemove.bind(null, id)
                }]}>
                    <NewsItem info={news} />
                </SwipeAction>
            })}
        </div> : <SkeletonAgain />}

    </div>
}
export default connect(state => state.store, action.store)(Store)